/* eslint-disable */
import React from "react"
import {
  ImageBackground,
  View,
  Text,
  ProgressViewIOS,
  Platform,
  ProgressBarAndroid,
  Dimensions
} from "react-native"

import { images } from "../../assets"
import { px2dp } from "../../utils"
import { observer, inject } from "mobx-react"
import Constance from "../base/Constance"
import BaseScreen from "../base/BaseScreen"
import { doCheck } from "./LineCheckManager"
import routerId from "consts/routerId"
// import * as Progress from "./progress"
// interface SplashScreenProps {
//   history?: any
// }
//
// interface SplashScreenState {}

const screenW = Dimensions.get("window").width
const renderProgressBar = barProgress => {
  if (Platform.OS === "android") {
    return (
      <ProgressBarAndroid
        style={{
          marginStart: px2dp(20),
          marginEnd: px2dp(20),
          width: screenW - 40,
          borderRadius: 8
        }}
        color={"#30B1E4"}
        progress={barProgress}
        styleAttr={"Horizontal"}
        indeterminate={false}
      />
    )
  } else {
    return (
      <ProgressViewIOS
        style={{
          marginStart: px2dp(20),
          marginEnd: px2dp(20),
          width: screenW - 40,
          borderRadius: 8
        }}
        progress={barProgress}
        progressTintColor={"#30B1E4"}
        trackTintColor={"#244EAC"}
      />
    )
  }
}
@inject("rootStore")
@observer
export default class SplashScreen extends BaseScreen {
  state = {
    progress: 0,
    lockProgress: 0
  }

  superRender() {
    return (
      <ImageBackground
        style={{ flex: 1, justifyContent: "flex-end" }}
        source={images.splash.bgIcon}
      >
        {this.checkView(this.state.progress)}
      </ImageBackground>
    )
  }

  // 底部的线路检测
  checkView = (progress = 0.5) => {
    let progressText = this.state.progress * 100
    return (
      <View style={{ alignItems: "center", marginBottom: px2dp(30) }}>
        <Text style={{ color: "#30B1E4", fontSize: px2dp(10), marginBottom: px2dp(10) }}>
          正在为您选择最安全的线路&nbsp;{~~progressText}
        </Text>
        {renderProgressBar(progress)}
      </View>
    )
  }

  componentDidMount() {
    if (!Constance.DEV) {
      // debug模式
      // 模拟延迟跳转
      let loopProgress = setInterval(() => {
        if (this.state.progress < 1) {
          this.setState({ progress: this.state.progress + 0.01 })
        } else {
          this.setState({ progress: 1 })
          clearInterval(loopProgress)
          Constance.isSplash = true
          Constance.HOST = "http://m.beibotop.com"
          // @ts-ignore
          this.props.history.push(routerId.home)
        }
      }, 10)
    } else {
      doCheck(
        () => {
          let loopProgress = setInterval(() => {
            if (this.state.progress < this.state.lockProgress) {
              this.setState({ progress: this.state.progress + 0.01 })
            } else if (this.state.progress == 1) {
              Constance.isSplash = true
              // @ts-ignore
              this.props.history.push(routerId.home)
              clearInterval(loopProgress)
            }
          }, 10)
        },
        host => {
          Constance.HOST = host
          this.showToast("最快的domain:" + host)
        },
        message => {
          this.showToast(message)
        },
        i => {
          this.setState({ lockProgress: i })
          if (i == 1) {
            setTimeout(() => {
              this.setState({ progress: 1 })
            }, 800)
          }
        }
      )
    }
  }
}
